<template>
	<view class="container">
		<com-head textTit="投诉与建议" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="tabList">
			<view class="tab"  v-for="(ele,index) in tabList" :key="index"
			:class="activeIndex == index ? 'active' : '' "
			@click="tabClick(index)"
			>
				{{ele}}
			</view>
		</view>
		<view class="feedbackWrap" v-if="activeIndex === 0"> 
			<!-- 反馈类型 -->
			<view class="feedbackKind">
				<view class="tit">反馈类型</view>
				<view class="chioseResult" @click="show = true">
					<text>{{from.type == 1 ? "建议" : '反馈'}}</text>
					<u-icon name="arrow-right" color="#333" size="28"></u-icon>
				</view>
			</view>
			<!-- 反馈内容 -->
			<view class="feedbackContent">
				<view class="tit">{{from.type == 1 ?"建议内容":"投诉内容"}}</view>
				<textarea v-model="from.content" placeholder="请输入" maxlength="200" placeholder-style="color:#999999"/>
			</view>
			<view class="uploadWrap">
				<view class="tit">上传凭证（最多3张，选填）</view>
				<view class="imgbox" >
					<image v-if="imgbox.length < 3" @click="uploadPhoto()" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/89765.png" mode="aspectFill"></image>
					<view class="imgWrap" v-for="(ele,index) in imgbox" :key="index" v-if="imgbox.length">
						<u-icon name="close-circle" color="#D5BE82" size="28" @click="deleImg(index)"></u-icon>
						<image :src="ele" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- 匿名提交 -->
			<view class="isAnonymity" >
				<text class="iconfont  " @click="isAnonymity = !isAnonymity"
				:class="isAnonymity ? 'icon-xuanzhong' : 'icon-weixuanzhong' "
				></text>
				<text>匿名提交</text>
			</view>
			<view class="submit" @click="submit()">
				提交
			</view>
		</view>
		<view class="historyList" v-else>
			<template v-if="list.length">
				<view class="list" v-for="(ele,index) in list" :key="index">
					<view class="listT">
						<text class="title">{{ele.is_anonymous == 1 ? "匿名" : ele.user.username || '-'}}</text>
						<text class="timer">{{ele.create_time || '-'}}</text>
					</view>
					<view class="feedbackContent">
						{{ele.content|| '-'}}
					</view>
					<view class="imgbox" v-if="ele.images">
						<image :src="ele" v-for="(ele,index) in ele.images" :key="index"></image>
					</view>
				</view>
				<u-loadmore margin-top="60" margin-bottom="30" :status="status" />
			</template>
			<view class="noDate" v-else>
				<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/10/2x-8.png" mode=""></image>
				<view>暂无更多反馈~</view>
			</view>
		</view>
		<u-picker v-model="show" mode="selector" :range="selector" @confirm="confirm"></u-picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show:false,
				selector:["建议","投诉"],
				tabList:['投诉与建议','历史记录'],
				activeIndex:0,
				isAnonymity:false,
				list:[],
				status:'loading',
				total:0,
				page:1,
				imgbox:[],
				from:{
					type:'1',
					content:'',
					images:'',
					is_anonymous:'',
				},
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad({active}) {
			if(active){
				this.activeIndex = active
			}
			this.getComplaint()
		},
		// 分页加载
		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++;
				this.getComplaint();
			}
		},
		methods: {
			confirm(e){
				console.log(e,"ddd")
				this.from.type = e[0] + 1
				console.log(this.from,"dd")
			},
			async submit(){
				if(!this.from.content){
					this.utlis.Toast('请输入反馈内容')
					return
				}
				this.from.is_anonymous = !this.isAnonymity ? "0" :"1"
				if(this.imgbox.length){
					this.from.images  = this.imgbox.join(",")
				}
				let {code,data} = await this.$u.api.setComplaint(this.from);
				if(code){
					this.utlis.goUrl(`/pages/mine/submitSuccess?type=1`)
					this.imgbox = []
					this.from={
						type:'1',
						content:'',
						images:'',
						is_anonymous:'',
					}
					this.isAnonymity =false
				}
			},
			deleImg(index){
				uni.showModal({
				    title: '提示',
					confirmColor:'#007664',
				    content: '您确定要删除此图片？',
				    success: async (res) => {
				        if (res.confirm) {
				            this.imgbox.splice(index,1)
							this.utlis.Toast('删除成功',"success")
				        } else if (res.cancel) {
				        }
				    }
				});
			},
			// 上传文件
			uploadPhoto(){
				let that = this
				wx.chooseImage({
					success: (imgRes) => {
						let tempFilePaths = imgRes.tempFilePaths[0]
						let imgType = tempFilePaths.split(".")[1]
						console.log(tempFilePaths,imgType,"imgResimgResimgRes")
						if(imgType == 'jpg' || imgType == 'png' || imgType == 'cdr'){
							uni.showLoading({
								title: '文件上传中',
								mask: true,
							   });
							   console.log(4444, this.store_id)
							  uni.uploadFile({
								url: that.utlis.baseUrl + '/upload',
								filePath: imgRes.tempFilePaths[0],
								name: 'files',
								header: {
									'storeId': this.store_id
								},
								headers: {
									'Content-Type': 'multipart/form-data' ,//********划重点
								},
								success(res) {
									console.log(555, res.data)
									var resdata = JSON.parse(res.data)
									that.utlis.Toast("上传成功","success")
									uni.hideLoading();
									that.imgbox.push(resdata.data)
								},
								fail: (err) => {
									uni.hideLoading();
									that.utlis.Toast("上传失败")
								}
							})
						}else{
							that.utlis.Toast("您上传图片格式不正确")
						}
					}
				})
			},
			tabClick(index){
				this.activeIndex = index
			},
			async getComplaint(){
				let {code,data} = await this.$u.api.getComplaint({page:this.page});
				if(code){
					if(this.page == 1 && !data.data.lenght){
						this.status = 'nomore';
					}
					this.list = [...this.list, ...data.data];
					this.list.forEach((ele)=>{
						if(ele.images){
							ele.images = ele.images.split(',')
						}
					})
					this.total = data.total;
					if (this.total <= this.list.length) this.status = 'nomore';
					else this.status = 'loading';
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 32rpx;
	.noDate{
		width: 360rpx;
		position: absolute;
		left: 50%;
		top: 34%;
		transform: translate(-50%,-50%);
		color: #666666;
		font-size: 26rpx;
		text-align: center;
		image{
			width: 360rpx;
			height: 310rpx;
			display: block;
			margin-bottom: 78rpx;
		}
	}
	.historyList{
		margin-top: 40rpx;
		.list{
			padding: 36rpx 43rpx 32rpx 32rpx;
			background-color: #FFFFFF;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			.listT{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.title{
					font-size: 32rpx;
					color: #333333;
				}
				.timer{
					color: #999999;
					font-size: 24rpx;
				}
			}
			.feedbackContent{
				font-size: 26rpx;
				color: #333333;
				line-height: 26rpx;
				margin: 42rpx 0 32rpx 0;
			}
			.imgbox{
				display: flex;
				image{
					width: 140rpx;
					height: 140rpx;
					border-radius: 12rpx;
					margin-right:30rpx ;
				}
			}
		}
	}
	.feedbackWrap{
		.submit{
			width: 686rpx;
			line-height: 96rpx;
			background: linear-gradient(140deg,#50DCC2 0%, #007664);
			border-radius: 48rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			margin: 0 auto;
		}
		.isAnonymity{
			margin: 252rpx 0 20rpx 0;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #666666;
			.icon-weixuanzhong{
				font-size: 30rpx;
				color: #666666;
				margin-right: 14rpx;
			}
			.icon-xuanzhong{
				color: #007664;
				margin-right: 14rpx;
			}
		}
		.uploadWrap{
			padding: 32rpx;
			background: #FFFFFF;
			color: #333333;
			font-size: 26rpx;
			.imgbox{
				display: flex;
				flex-wrap: wrap;
				margin-top: 28rpx;
				.imgWrap{
					width: 140rpx;
					height: 140rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					margin-bottom: 22rpx;
					position: relative;
					u-icon{
						position: absolute;
						right: 0;
						top: 0;
					}
				}
				image{
					width: 140rpx;
					height: 140rpx;
					background: #f6f7fa;
				}
				.imgWrap:nth-child(4n+4){
					margin-right: 0;
				}
			}
		}
		.feedbackContent{
			padding: 32rpx;
			background: #FFFFFF;
			color: #333333;
			font-size: 26rpx;
			margin-bottom: 30rpx;
			.tit{
				margin-bottom: 28rpx;
			}
			textarea{
				width: 100%;
				height: 200rpx;
			}
		}
		.feedbackKind{
			padding: 32rpx;
			background: #FFFFFF;
			margin: 30rpx 0;
			display: flex;
			.tit{
				font-size: 26rpx;
				color: #333333;
			}
			.chioseResult{
				flex: 1;
				text-align: right;
				color: #333333;
				font-size: 24rpx;
			}
		}
	}
	.tabList{
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 20rpx;
		margin-top: 15rpx;
		overflow: hidden;
		.tab{
			width: 343rpx;
			line-height: 82rpx;
			color: #333333;
			font-size: 26rpx;
			text-align: center;
		}
		.active{
			background: #007664;
			// border-radius: 20rpx;
			color: #FFFFFF;
		}
	}
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
